<template>
    <div>
      <!-- 头部开始 -->
      <van-sticky>
       
      
      <van-nav-bar
          left-arrow
          @click-left="onClickLeft"
      />
    </van-sticky>
      <div class="top">
        <p class="top_name">{{ detail.name }}</p>
        <div>
          <span @click="xx" v-for="item in detail.services" class="top_xx">{{ item.name }}</span><span class="fu">&gt;</span>
        </div>
        <hr color="whitesmoke">
        <van-nav-bar left-arrow>
          <template #title>
            {{ detail.address}}
          </template>
          <template #left>
            <van-icon name="location-o" size="18" />
          </template>
          <template #right>
            <van-icon name="phone-o" size="18" />
          </template>
        </van-nav-bar>
      </div>
       <!-- 头部结束 -->


      <!-- 轮播图开始 -->
      <div class="swiper">
        <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="item in filmsa" :key="item.filmId">
        <img :src="item.poster" alt="" class="tu">
      </div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
  </div>

      </div>
      
      <!-- 轮播图结束 -->

      <!-- 电影详情开始 -->
        <div class="xq">
          <div class="filmInfo" @click="tiaoz(movie.filmId)">
                        <div class="filmHead">
                            <span class="filmName">{{ movie.name }}</span>
                            <span class="filmScore">{{ movie.grade ? movie.grade : 10 }}</span>
                            <span class="fen">分</span>
                        </div>
                        <div class="filmfoot">
                          <span>{{ movie.category }} | {{ movie.runtime }}分钟 | </span><span class="filmDesc" v-for="item in  movie.actors" :key="item.filmId">{{ item.name }} | </span>
                          <span class="jt">&gt;</span>
                        </div>
          </div>
        </div>

      <!-- 电影详情结束 -->

      <!-- 排片开始 -->
      <van-tabs v-model="active" class="v-tab" >
          <van-tab title="周一">
            <div v-for="item in changci" class="box">
                <div class="z">
                  <div class="s">
                    <div class="sta">{{ showAtDate(item.showAt) }}</div>
                    <div class="end">{{ showAtDate(item.endAt) }}散场</div>
                  </div>
                  <div class="x">
                    <div class="lan">{{ item.filmLanguage }} <span>{{ item.imagery }}</span></div>
                    <div class="cs">{{ item.hallName }}</div>
                  </div>
                </div>
                <div class="y">
                  <span class="price">￥{{ item.salePrice /100 }}</span>
                  <span class="gp">购票</span>
                </div>
            </div>
          </van-tab>
      </van-tabs>


      <!-- 排片结束 -->

    </div>
</template>

<script>
import Swiper from 'swiper';
import { CinemaInfo, CinemaFilms, FilmInfo, FilmSchedules  } from '@/request/request'
import 'swiper/swiper-bundle.min.css'
import { NavBar } from 'vant';
import { Icon } from 'vant';
import { Tab, Tabs } from 'vant';
import { Sticky } from 'vant';
import { createApp } from 'vue';
import 'vant/lib/index.css';
const app = createApp()
app.use(Sticky);
app.use(Tab);
app.use(Tabs);
app.use(Icon);
app.use(NavBar);
export default {
    data () {
        return {
            active: 2,
            detail:{},
            filmsa:{},
            movie:{},
            changci:{}
        }
    },
    async mounted(){
           
      let cinemaid = this.$route.query.id
      // 影院具体信息
      let data = await CinemaInfo(cinemaid)
      this.detail = data.data.cinema
      // 排片详情
      data = await CinemaFilms(cinemaid)
      this.filmsa = data.data.films
      console.log(this.filmsa,111);
      // 电影详情
      data = await FilmInfo(this.filmsa[0].filmId)
      this.movie = data.data.film
      
      let cinemaId1 = this.$route.query.id  
      let ids = this.movie.filmId

      // 场次
      data = await FilmSchedules(cinemaId1,ids)
      let cinemaId = this.$route.query.id  
      this.changci = data.data.schedules
      // console.log(this.changci);
      let that = this
      var swiper = new Swiper('.swiper-container', {
          slidesPerView: 3,
          spaceBetween: 100,
          slideToClickedSlide: true,
          centeredSlides: true,
          loop: false,
          pagination: {
            el: '.swiper-pagination',
            clickable: true,
          },
          on: {
            slideChangeTransitionEnd: function(){
              let id = that.filmsa[this.activeIndex].filmId
              // console.log(id,this.activeIndex);
              
              FilmInfo(id).then(res => {
                that.movie = res.data.film
                    // console.log(that.movie);
                  FilmSchedules(cinemaId,id).then(res =>{
                    that.changci = res.data.schedules
                    // console.log(that.changci,111);

                  })
                  
                })
              },
          },
    });
      
    },
    methods: {
        onClickLeft() {
          this.$router.back()
      },
      xx(){
      let cinemai = this.$route.query.id
        this.$router.push({path:'/xiangxi',query:{id:cinemai}})
      },
      tiaoz(id) {
        this.$router.push({path:'/detail',query:{id,url: this.$route.path}})
      },
      showAtDate(val){
            let date = new Date(val*1000)
            let hours = date.getHours();
            let minutes = date.getMinutes();
            return hours + ':' + minutes
        }
    },
}
</script>

<style lang="scss" scoped>
.top{
  text-align: center;
  .top_name{
    font-size: 18px;
  }
  .top_xx{
    border: 0.3px solid orange;
    padding: 1px 3px;
    color: orange;
    margin: 0 5px;
  }
  .fu{
    color: orange;
  }
}
.v-tab{
  margin-bottom: 50px;
}
.box{
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100px;
  .sta{
    margin-bottom: 10px;
  }
  .z{
    display: flex;
    margin-left: 30px;

    .s{
      margin-right: 20px;
      margin-bottom:15px;
      
    }
  }
  .lan{
        margin-bottom: 10px;
      }
  .cs{
      font-size: 14px !important;
  }
  .end{
    font-size: 14px !important;
    margin-top: 12px;
  }
  .y{
    margin-right: 30px;
    .price{
      margin-right: 27px;
    }
    .gp{
      border: 0.3px solid orangered;
      // margin: ;
      padding: 6px;
      color: orangered;
    }
  }
}
.xq{
  position: relative;
  .jt{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 15px;
  }
}
.filmDesc{
  width: 50px;
}
.filmfoot{
  text-align: center;
  margin-top: 15px;
  color: rgb(173, 173, 173);
  margin-left: 30px;
  font-size: 14px;
  padding: 3px 30px;
  width: 400px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.filmHead{
  margin-top: 15px;
  text-align: center;
  .filmScore{
    color: rgb(253, 183, 52);
    margin-left: 5px;
  }
  .fen{
    font-size: 14px;
    color: rgb(253, 183, 52);

  }
}
html, body {
      position: relative;
      height: 100%;
      .tu{
        width: 90px;
        height: 150px;
      }
    }
    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color:#000;
      margin: 0;
      padding: 0;
    }
    .swiper-container {
      width: 100%;
      height: 100%;
    }
    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
	  transition: 300ms;
	  transform: scale(0.8);
    }
	.swiper-slide-active,.swiper-slide-duplicate-active{
      transform: scale(1);
	}

</style>
